<template>
	<el-input-number v-model.trim="inputVal"
		:clearable="props.configure.clearable == undefined ? true : props.configure.clearable" @change="handleChange"
		:disabled="configure.disabled" :min="configure.min" :max="configure.max || 9999999" :precision="configure.precision"
		:step="configure.step" :stepStrictly="configure.stepStrictly" />
</template>

<script lang="ts" setup>
import { PropType, ref, watch } from "vue";
import { PyInputNumberType } from "./type";
const props = defineProps({
	//双向绑定的值
	modelValue: {
		type: [String, Number],
		required: false,
		default: "",
	},
	configure: {
		type: Object as PropType<PyInputNumberType>,
		default: {
			disabled: false,
		},
	},
});

const inputVal = ref(props.modelValue || "");
const emits = defineEmits(["update:modelValue", "onChange"]);

//change事件
const handleChange = () => {
	emits("onChange", inputVal.value);
	emits("update:modelValue", inputVal.value);
};

watch(
	() => props.modelValue,
	newInputVal => {
		inputVal.value = newInputVal;
	}
);
</script>
